<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>

<!DOCTYPE html>

<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="../static/css/mdui.min.css" crossorigin="anonymous" />
    <script src="../static/js/mdui.min.js" crossorigin="anonymous"></script>
    <script src="../static/js/http.js" crossorigin="anonymous"></script>
    <title>员工管理</title>
</head>

<header class="mdui-appbar">
    <div class="mdui-toolbar mdui-color-theme">
        <a href="welcome.html" class="mdui-typo-headline sys_name">HR系统</a>
        <a href="welcome.html" class="mdui-btn mdui-ripple mdui-btn-icon">
            <i class="mdui-icon material-icons">arrow_back</i>
        </a>

        <a href="" class="mdui-typo-title">员工管理</a>

        <div class="mdui-toolbar-spacer"></div>
        <a href="javascript:;" class="mdui-btn mdui-ripple mdui-btn-icon right_menu" style="margin-right: 1rem;"
            mdui-menu="{target: '#menu'}">
            <i class="mdui-icon material-icons">more_vert</i>

        </a>
        <ul class="mdui-menu" id="menu">
            <li class="mdui-divider"></li>
            <li class="mdui-menu-item">
                <a href="javascript:;" onclick="logout()" class="mdui-ripple">
                    <i class="mdui-icon material-icons">power_settings_new</i>
                    <text class="menu-item-text">退出</text>
                </a>
            </li>
        </ul>
    </div>
</header>


<body class="mdui-theme-primary-indigo mdui-theme-layout-auto mdui-theme-accent-indigo">

    <!-- <div class="mdui-row" style="position: absolute; top: 5rem;">
        <div class="mdui-textfield mdui-textfield-floating-label">
            <label class="mdui-textfield-label">Email</label>
            <input class="mdui-textfield-input" type="email" />
        </div>
    </div> -->

    <div class="mdui-row row-layout" style="top: 13%;">
        <div class="mdui-col-xs-12">

            <!-- <div class="mdui-col-sm-3"> -->

            <!-- </div> -->

            <!-- <div class="mdui-textfield mdui-textfield-floating-label" style="width: 80%;">
                <label class="mdui-textfield-label">搜索</label>
                <input class="mdui-textfield-input" type="email" />
            </div> -->

            <div style="text-align: right; padding-bottom: 1rem;">
                <button class="mdui-btn mdui-color-green-800" onclick="location.href = 'emp_beforeadd'">添加</button>
            </div>


            <div class="mdui-row">
                <div class="mdui-col-sm-3">

                </div>
                <div class="mdui-col-sm-9">

                </div>
            </div>


            <div class="mdui-table-fluid">
                <table class="mdui-table mdui-table-hoverable">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>姓名</th>
                            <th>职位</th>
                            <th>工资</th>
                            <th>性别</th>
                            <th>领导</th>
                            <th>部门</th>
                            <th>入职</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <c:forEach items="${list}" var="emp">
                            <tr>
                                <td id="id">${emp.id}</td>
                                <td id="name">${emp.name}</td>
                                <td id="job">${emp.job}</td>
                                <td id="sal">${emp.sal}</td>
                                <td id="sex">${emp.sex}</td>
                                <td id="mgr">
                                    <c:forEach items="${ls}" var="employee">
                                        <c:if test="${emp.mgr == employee.id}">
                                            ${employee.name}
                                        </c:if>
                                    </c:forEach>
                                </td>
                                <td id="dept">
                                    <c:forEach items="${dlist}" var="dept">
                                        <c:if test="${emp.deptId == dept.id}">
                                            ${dept.name}
                                        </c:if>
                                    </c:forEach>
                                </td>
                                <td id="hireDate">
                                    <fmt:formatDate value="${emp.hireDate}" pattern="yyyy年MM月dd日" />
                                </td>
                                <td>
                                    <button class="mdui-btn mdui-color-theme mdui-ripple"
                                            onclick="location.replace('emp_find?id=${emp.id}')">修改</button>
                                    <button class="mdui-btn mdui-color-red-600 mdui-ripple"
                                            onclick=" location.href =  'emp_delete?id=${emp.id}'">删除</button>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </div>

    <div class="mdui-dialog" id="modify-dialog" modal=true overlay=false>
        <div class="mdui-dialog-title">修改员工</div>
        <div class="mdui-dialog-content">
            <div class="mdui-row">
                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>

                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>
            </div>

            <div class="mdui-row">
                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>

                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>
            </div>

            <div class="mdui-row">
                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>

                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>
            </div>

            <div class="mdui-row">
                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>

                <div class="mdui-col-sm-6">
                    <div class="mdui-textfield mdui-textfield-floating-label mdui-p-t-0">
                        <!-- <i class="mdui-icon material-icons">account_circle</i> -->
                        <div class="mdui-textfield-label">姓名</div>
                        <input class="mdui-textfield-input" name="username" type="username" id="reg_username"
                            required />
                        <!-- <div class="mdui-textfield-error">请输入用户名</div> -->
                    </div>
                </div>
            </div>



        </div>
        <div class="mdui-dialog-actions">
            <button class="mdui-btn mdui-ripple" mdui-dialog-cancel>cancel</button>
            <button class="mdui-btn mdui-ripple" mdui-dialog-confirm> yes</button>
        </div>

        <!-- <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
            <a href="#example4-tab1" class="mdui-ripple">web</a>
            <a href="#example4-tab2" class="mdui-ripple">shopping</a>
            <a href="#example4-tab3" class="mdui-ripple">videos</a>
        </div>
        <div id="example4-tab1" class="mdui-p-a-2">
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
            <p>tab 1</p>
        </div>
        <div id="example4-tab2" class="mdui-p-a-2">
            <p>tab 2</p>
            <p>tab 2</p>
            <p>tab 2</p>
            <p>tab 2</p>
            <p>tab 2</p>
            <p>tab 2</p>
        </div>
        <div id="example4-tab3" class="mdui-p-a-2">
            <p>tab 3</p>
            <p>tab 3</p>
            <p>tab 3</p>
            <p>tab 3</p>
            <p>tab 3</p>
            <p>tab 3</p>
        </div> -->
    </div>
</body>

</html>

<script>
    function logout() {
        window.location.replace('../logout')
    }

    var tab = new mdui.Tab('#example4-tab');
    document.getElementById('modify-dialog').addEventListener('open.mdui.dialog', function () {
        tab.handleUpdate();
    });

    var inst = new mdui.Dialog('#modify-dialog', { modal: true });

    function open_modify(param) {
        console.log(param)
        http.get("emp_find?id="+param, function (err, result) {
            console.log(result)
        })
        var row = param.parentNode.parentNode // 点击的行
        var name = row.find('#name')
        console.log(name)
        console.log(param.parentNode.parentNode)
        console.log('do it')
        inst.open()

    }

    document.getElementById("modify-dialog").addEventListener("cancel.mdui.dialog", function () {
        console.log('cancel')
    });

    document.getElementById("modify-dialog").addEventListener("confirm.mdui.dialog", function () {
        console.log('yes')
    });

    function beforeDelete(param) {
        console.log(param)
        mdui.dialog({
            title: '确认删除',
            content: '',
            buttons: [
                {
                    text: '取消'
                },
                {
                    text: '确认',
                    onClick: function(){
                        console.log(param + ' confirm')
                        // mdui.alert('点击确认按钮的回调');
                        location.href =  'emp_delete?id='+param
                        // location.href = 'emp_list'
                        // location.reload()
                        // document.execCommand('Refresh')
                        // window.location.reload(true)
                    }
                }
            ]
        });



    }


</script>

<style>
    .menu-item-text {
        padding: 6px;
    }

    .mdui-col-xs-6 {
        margin-top: inherit;
    }

    .row-layout {
        position: absolute;
        left: 5%;
        right: 5%;
        top: 15%;
    }

    .mdui-appbar {
        position: fixed;
        width: 100%;
    }

    .mdui-card {
        margin-bottom: 1rem;
    }

    .mdui-table thead tr th {
        font-size: large;
        color: black;
        font-weight: bold;
    }

    .mdui-table tbody tr td {
        font-size: medium;
        color: #000000a1;
        font-weight: bolder;
    }

    .mdui-table thead tr th {
        text-align: center
    }

    .mdui-table tbody tr td {
        text-align: center
    }
</style>